<template>
  <div class="mod-config">
    <div class="queryData">
      <el-form class="queryForm" :inline="true" label-width="0" :model="form">
        <el-form-item label="">
          <el-input v-model="form.name" size="small" placeholder="参数名" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary">查询</el-button>
          <el-button size="mini" type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vxeLable
      ref="vxeLable"
      :table-config="tableConfig"
      @edit="editData"
      @del="delData"
      @add="addData"
      @import="importData"
      @export="exportData"
      @checkboxChange="checkboxChange"
    >
      <div slot="header">
        <el-button size="mini" icon="el-icon-circle-plus-outline" type="primary" @click="addData"
          >新增</el-button
        >
        <el-button size="mini" icon="el-icon-delete" type="danger"
          >删除</el-button
        >
      </div>
    </vxeLable>

    <!-- 弹窗, 新增 / 修改 -->
    <elDialog :dialog="dialog">
      <add @close="close" />
    </elDialog>
  </div>
</template>

<script>
import vxeLable from "@/components/common/vxeLable";
import vxeLableJs from "@/components/mixins/vxeLable.js";
import elDialog from "@/components/common/dialog";
import add from "./add";
export default {
  components: {
    vxeLable,
    elDialog,
    add
  },
  mixins: [vxeLableJs],
  data() {
    return {
      dialog: {
        show: false,
        title: "详情",
        width: "30%"
      },
      form: {},
      tableConfig: {
        api: "",
        height: 700,
        operateBtns: [
          { emit: "edit", name: "修改", type: "primary" },
          { emit: "del", name: "删除", type: "danger" }
        ],
        treeConfig: {
          transform: true,
          rowField: "deptId",
          parentField: "parentId"
        },
        tableData: [
          {
            deptId: 1,
            parentId: 0,
            name: "有限公司",
            parentName: null,
            orderNum: 0,
            delFlag: 0,
            open: null,
            list: null
          },
          {
            deptId: 2,
            parentId: 1,
            name: "长沙分公司",
            parentName: "有限公司",
            orderNum: 1,
            delFlag: 0,
            open: null,
            list: null
          },
          {
            deptId: 3,
            parentId: 1,
            name: "上海分公司",
            parentName: "有限公司",
            orderNum: 2,
            delFlag: 0,
            open: null,
            list: null
          },
          {
            deptId: 4,
            parentId: 3,
            name: "技术部",
            parentName: "上海分公司",
            orderNum: 0,
            delFlag: 0,
            open: null,
            list: null
          },
          {
            deptId: 5,
            parentId: 3,
            name: "销售部",
            parentName: "上海分公司",
            orderNum: 1,
            delFlag: 0,
            open: null,
            list: null
          },
          {
            deptId: 11,
            parentId: 2,
            name: "测试测试",
            parentName: "长沙分公司",
            orderNum: 0,
            delFlag: 0,
            open: null,
            list: null
          },
          {
            deptId: 13,
            parentId: 3,
            name: "c擦撒撒旦撒旦撒大111111111",
            parentName: "上海分公司",
            orderNum: 0,
            delFlag: 0,
            open: null,
            list: null
          }
        ],
        tableToolbar: {
          zoom: true,
          custom: true,
          slots: {
            buttons: "toolbar_buttons"
          }
        },
        tableColumn: [
          { type: "checkbox", width: 60, align: "center" },
          { type: "seq", width: 60, title: "序号" },
          { type: "seq", title: "单位名称", treeNode: true },
          { field: "parentName", title: "上级单位" },
          { field: "orderNum", title: "排序" },
          { field: "delFlag", title: "是否删除" },
          {
            title: "操作",
            width: 150,
            align: "center",
            className: "operate",
            slots: { default: "operate" },
            fixed: "right"
          }
        ]
      },
      dataForm: {},
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false
    };
  },
  activated() {
    this.getDataList();
  },
  mounted() { },
  methods: {
    close() {
      this.dialog.show = false;
    },
    aaa(row) {
      console.log(row);
    },
    editData() {
      this.dialog.show = true;
    },
    delData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    addData() {
      this.detailsData = {};
      this.dialog.title = "新增";
      this.dialog.show = true;
    },
    importData() {
      this.$refs.vxeLable.uploadFileEvent(files => {
        const formBody = new FormData();
        formBody.append("file", files[0]);
        console.log("导入import", formBody);
      });
    },
    checkboxChange(val) {
      console.log(val, "checkbox");
    },
    exportData() {
      console.log("导出export");
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl("/sys/menu/list"),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        this.dataListLoading = false;
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定对[id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
            method: "post",
            data: this.$http.adornData()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => { });
    }
  }
};
</script>
<style scoped lang="scss">
.queryData {
  font-size: 0.14rem;
  color: #fff;
}
.queryForm {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
